<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>{$siteTitle}</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="stylesheet" href="__PUBLIC__/admin/wx/css/default.css">
        <script type="text/javascript" src="__PUBLIC__/admin/wx/js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/admin/wx/js/jquery.form.js"></script>
        <script charset="utf-8" src="__PUBLIC__/admin/kindeditor-all-min.js"></script>
		<script charset="utf-8" src="__PUBLIC__/admin/lang/zh_CN.js"></script>
		<script charset="utf-8" src="__PUBLIC__/admin/plugins/code/prettify.js"></script>
		<style type="text/css">
			.demo{width:620px; margin:30px auto}
			.demo p{line-height:32px}
			.btnfile{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
			.btnfile input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
			.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
			.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
			.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
			.files{height:22px; line-height:22px; margin:10px 0}
			.delimg{margin-left:20px; color:#090; cursor:pointer}
			.place{height:40px; background:url(__PUBLIC__/admin/images/righttop.gif) repeat-x;}
			.place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;}
			.placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(__PUBLIC__/admin/images/rlist.gif) no-repeat right;}
			.placeul li:last-child{background:none;}
		</style>
    </head>
    <body>
    	<div class="place">
		    <span>位置：</span>
		    <ul class="placeul">
		    <li>首页</li>
		    <li>编辑多图文素材</li>
		    </ul>
		</div>
        <div class="col_main">
        	<form action="{:U('addMoreImgNews',array('news_key'=>$news_key))} " method="post">
        		<input type="hidden" name="news_total" id="real_news_total" value="{$count_data}"/>
	            <div class="main_bd">
	                <div class="media_preview_area">        
	                    <div class="appmsg multi editing">
	                        <div id="js_appmsg_preview" class="appmsg_content">
	                        	<foreach name="one_news_images" key="k" item="one_news_article" >
	                        		<if condition="$k eq 0">
	                        	
	                        			<input type="hidden" name="id{$k+1}" id="id{$k+1}" value="{$one_news_article.id}"/>
			                        	<input type="hidden" name="news_title{$k+1}" id="news_title{$k+1}" value="{$one_news_article.news_title}"/>
				            			<input type="hidden" name="news_author{$k+1}" id="news_author{$k+1}" value="{$one_news_article.news_author}"/>
				            			<input type="hidden" name="news_img_path{$k+1}" id="news_img_path{$k+1}" value="{$one_news_article.news_img_path}"/> 
				            			<input type="hidden" name="image_path{$k+1}" id="image_path{$k+1}" value="{$one_news_article.image_path}"/>
				            			<input type="hidden" name="is_show_article{$k+1}" id="is_show_article{$k+1}" value="{$one_news_article.is_show_article}"/>
				            			<input type="hidden" name="news_href{$k+1}" id="news_href{$k+1}" value="{$one_news_article.news_href}"/>
				            			<textarea name="content{$k+1}" id="content{$k+1}" id="content{$k+1}" style="display:none;">{$one_news_article.news_content}</textarea>
			                            <div id="appmsgItem{$k+1}" data-id="{$k+1}" class="js_appmsg_item ">
			                                <div class="appmsg_info"><em class="appmsg_date"></em></div>
			                                <div class="cover_appmsg_item">
			                                    <h4 class="appmsg_title"><a href="javascript:void(0);" onclick="return false;" target="_blank"><span id="news_title_show{$k+1}">{$one_news_article.news_title}</span></a></h4>
			                                    <div class="appmsg_thumb_wrp">
			                                        <if condition="$one_news_article.news_img_path neq null">
			                                    		<img class="js_appmsg_thumb appmsg_thumb" style="display: block;" src="{$one_news_article.news_img_path}" id="news_image{$k+1}">
			                                    	<else />
			                                    	 	<i class="appmsg_thumb default" id="news_thumb{$k+1}">封面图片</i>
			                                    	</if>
			                                    </div>
			                                    <div class="appmsg_edit_mask">
			                                        <a class="icon18_common edit_gray js_edit" data-id="{$k+1}" onclick="show_edit_news({$k+1})" href="javascript:;" >编辑</a>
			                                    </div>
			                                </div>
			                            </div>
			                         <else />
			                         	<div id="appmsgItem{$k+1}" class="appmsg_item js_appmsg_item ">
			                         		<input type="hidden" name="id{$k+1}" id="id{$k+1}" value="{$one_news_article.id}"/>
				                         	<input type="hidden" name="news_title{$k+1}" id="news_title{$k+1}" value="{$one_news_article.news_title}"/>
					            			<input type="hidden" name="news_author{$k+1}" id="news_author{$k+1}" value="{$one_news_article.news_author}"/>
					            			<input type="hidden" name="news_img_path{$k+1}" id="news_img_path{$k+1}" value="{$one_news_article.news_img_path}"/>
					            			<input type="hidden" name="image_path{$k+1}" id="image_path{$k+1}" value="{$one_news_article.image_path}"/> 
					            			<input type="hidden" name="is_show_article{$k+1}" id="is_show_article{$k+1}" value="{$one_news_article.is_show_article}"/>
					            			<input type="hidden" name="news_href{$k+1}" id="news_href{$k+1}" value="{$one_news_article.news_href}"/>
					            			<textarea name="content{$k+1}" id="content{$k+1}" id="content{$k+1}" style="display:none;">{$one_news_article.news_content}</textarea>
			                                <if condition="$one_news_article.news_img_path neq null">
	                                    		<img class="js_appmsg_thumb appmsg_thumb" style="display: block;" src="{$one_news_article.news_img_path}" id="news_image{$k+1}">
	                                    	<else />
	                                    	 	<i class="appmsg_thumb default" id="news_thumb{$k+1}">封面图片</i>
	                                    	</if>
			                                <h4 class="appmsg_title"><a href="javascript:void(0);" >{$one_news_article.news_title}</a></h4>
			                                <div class="appmsg_edit_mask">
			                                    <a class="icon18_common edit_gray js_edit" data-id="{$k+1}" onclick="show_edit_news({$k+1})"  href="javascript:void(0);">编辑</a>
			                                    <a class="icon18_common del_gray js_del" data-id="{$k+1}" onclick="show_delete_news({$k+1})"  href="javascript:void(0);">删除</a>
			                                </div>
			                            </div>
			                         </if>
			                     </foreach>
	                        </div>
	                        <a onclick="return false;" class="create_access_primary appmsg_add" id="js_add_appmsg" href="javascript:void(0);">
	                            <i class="icon20_common add_gray">增加一条</i>
	                        </a>
	                    </div>
	                </div>
	                <div class="media_edit_area">
	                    <div id="js_appmsg_editor">
	                        <div class="appmsg_editor" style="margin-top: 0px;">
	                            <div class="inner">
	                                <div class="appmsg_edit_item">
	                                    <label for="" class="frm_label">标题</label>
	                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="news_title" id ="news_title" value="{$one_news_images[0].news_title}"/></span>
	                                </div>
	                                <div class="appmsg_edit_item">
	                                    <label for="" class="frm_label">
	                                        <strong class="title">作者</strong>
	                                        <p class="tips l">（选填）</p>
	                                    </label>
	                                    <span class="frm_input_box"><input type="text" class="frm_input js_author" name="news_author" id="news_author" value="{$one_news_images[0].news_author}"/></span>
	                                </div>
	                                <div class="appmsg_edit_item">
	                                    <label for="" class="frm_label">
	                                        <strong class="title">封面</strong>
	                                        <p class="js_cover_tip tips">（大图片建议尺寸：900像素 * 500像素）</p>
	                                    </label>
	                                    <div class="upload_wrap">
	                                        <div class="upload_box">
	                                            <div class="upload_area">
	                                            <div class="btnfile">
										            <span>上传</span>
										            <input id="fileupload" type="file" name="mypic">
										        </div>
										        <div class="progress">
										    		<span class="bar"></span><span class="percent">0%</span>
												</div>
										        <div class="files">
										        	<b>({$one_news_images[0].image_path})</b><span class='delimg' data-del-id=1 rel="{$one_news_images[0].image_path}">删除</span>
										        </div>
										        <div id="showimg"><img src='{$one_news_images[0].news_img_path}' style='width:100px; height:100px;'></div>
	                                        </div>
	                                    </div>
	                                    <p class="frm_tips">
	                                        <label for="" class="frm_checkbox_label js_show_cover_pic selected">
	                                            <input type="checkbox" name="is_show_article" id="is_show_article" style="margin-top: 3px; margin-right:10px; float: left;" value="{$one_news_images[0].is_show_article}" <if condition="$one_news_images[0]['is_show_article'] eq '1'"> checked="checked"</if> />
	                                           		封面图片显示在正文中 
	                                        </label>
	                                    </p>
	                                </div>
	                                <div id="js_ueditor" class="appmsg_edit_item content_edit">
	                                    <label for="" class="frm_label">
	                                        <strong class="title">正文</strong>
	                                        <p class="tips">
	                                            <em id="js_auto_tips">（自动保存：2014/08/08 16:20:12）</em>
	                                            <div style="margin-top: 20px;float: left;"> 
	                                            	<textarea name="content" id="content">{$one_news_images[0].news_content}</textarea>
	                                            </div>
	                                        </p>
                                    	</label>
	                                    <div class="js_desc_area dn appmsg_edit_item" id="appmsg_link">
											<label for="" class="frm_label">原文链接</label>
											<span class="frm_input_box"><input type="text" class="frm_input js_author" name="news_href" id="news_href" value="{$one_news_images[0].news_href}"/></span>
										</div>
	                                </div>
	                                <i class="arrow arrow_out" style="margin-top: 0px;"></i>
	                                <i class="arrow arrow_in" style="margin-top: 0px;"></i>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                <div class="tool_area">
	                    <div class="tool_bar border tc">
	                        <span id="js_submit" class="btn btn_input btn_primary"><button>保存</button></span>
	                        <span id="js_preview" class="btn btn_input btn_default"><button>预览</button></span>
	                    </div>
	                </div>
	            </div>
	        </div>
        </form>
        <script type="text/javascript">
        
        KindEditor.ready(function(K) {
        	var editor1 = K.create('textarea[name="content"]', {
        		cssPath : '__PUBLIC__/admin/plugins/code/prettify.css',
        		uploadJson : '__PUBLIC__/lib/upload_json.php',
        		width : "117%", //编辑器的宽度为70%
        	    height : "360px", //编辑器的高度为100px
        		fileManagerJson : '__PUBLIC__/lib/file_manager_json.php',
        		items:['source', 'undo', 'redo',
        		       'justifyleft', 'justifycenter', 'justifyright',
        		       'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent','selectall',
        		       'title', 'bold',
        		       'italic', 'underline','image','removeformat','|', 'fullscreen'],
        		allowFileManager : true,
        		afterCreate : function() {
        			var self = this;
        			K.ctrl(document, 13, function() {
        				self.sync();
        				K('form[name=example]')[0].submit();
        			});
        			K.ctrl(self.edit.doc, 13, function() {
        				self.sync();
        				K('form[name=example]')[0].submit();
        			});
        		},
        		afterBlur: function(){this.sync();changeTextarea();}
        	});
        	prettyPrint();
        });
        
        
        
        	var news_total = {$count_data};
        	var cur_image_text = 1;//当前是编辑的是第几个图文
        	var totalArr = [];
        	for(i=1;i<= news_total && news_total < 9;i++){
            	if(totalArr.length > 8 ){
					break;
				}
            	totalArr.push(1);  
        	}
        	
        	function changeTextarea(){
            	var content = $("#content").val();
//             	KindEditor.instances[0].html("");
            	$("#content"+cur_image_text).val(content);
            	
            }
        	
        	var middle_val = 0;
        	$(function () {
        		var bar = $('.bar');
        		var percent = $('.percent');
        		var showimg = $('#showimg');
        		var progress = $(".progress");
        		var files = $(".files");
        		var btn = $(".btnfile span");
        		$("#fileupload").wrap("<form id='myupload' action='{:U(\'ajaxUploadImg\')}' method='post' enctype='multipart/form-data'></form>");
        	    $("#fileupload").change(function(){
       	    		$("#myupload").ajaxSubmit({
           				dataType:  'json',
           				beforeSend: function() {
           					progress.show();
           	        		var percentVal = '0%';
           	        		bar.width(percentVal);
           	        		percent.html(percentVal);
           					btn.html("上传中...");
           	    		},
           	    		uploadProgress: function(event, position, total, percentComplete) {
           	        		var percentVal = percentComplete + '%';
           	        		bar.width(percentVal);
           	        		percent.html(percentVal);
           	    		},
           				success: function(data) {
           					files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' data-del-id='"+cur_image_text+"' rel='"+data.pic+"'>删除</span>");
           					var img = '{$serverUrl}'+"__PUBLIC__/data/files/news/"+data.pic;
           					showimg.html("<img src='"+img+"' style='width:100px; height:100px;'>");
           					$("#news_image"+cur_image_text).attr("src", img);
           					$("#news_img_path"+cur_image_text).val(img);
           					$("#news_image"+cur_image_text).show();
           					$("#news_thumb"+cur_image_text).hide();
           					btn.html("上传");
           				},
           				error:function(xhr){
           					btn.html("上传失败");
           					bar.width('0')
           					files.html(xhr.responseText);
           				}
           			});
        		});
        		
        		$(".delimg").live('click',function(){
        			var pic = $(this).attr("rel");
        			var del_id = $(this).attr("data-del-id");
        			$.post("{:U('ajaxDeleteImg')}",{imagename:pic},function(msg){
        				if(msg==1){
        					files.html("删除成功.");
        					showimg.empty();
        					progress.hide();
        					$("#new_img_default"+del_id).attr("src", "");
        					$("#news_img_path"+del_id).val("");
        					$("#image_path"+del_id).val("");
        					$("#news_image"+del_id).hide();
           					$("#news_thumb"+del_id).show();
        				}else{
        					alert('删除 失败.');
        				}
        			});
        		});
        	});
        		var padding_top = 0;
        		if(news_total == 1) {
        			padding_top = 0;
        		} else if(news_total == 2){
        			padding_top = 200;
        		} else {
        			padding_top = 200 + (news_total-2)*120;
        		}
        		
	            $(".js_del").bind("click",function(){
	                $(this).parents(".js_appmsg_item").remove();
	            });
	            $(".create_access_primary").bind("click",function(){
	            	
	            	totalArr.push(1);
	            	if(totalArr.length > 8 ){
						alert('最多只能添加八张多图文');  
						return false;
					}
	            	
	            	if(news_total == 1) {
	            		padding_top += 200;
	            	} else {
	            		padding_top += 120;
	            	}
 	            	$(".media_edit_area").css({"padding-top":""+padding_top+"px"});
	            	var str = "";
	            	if(middle_val != 0) {
	            		news_total = middle_val;
	            		middle_val = 0;
	            	}
	            	news_total ++;
	            	cur_image_text = news_total;
	            	$("#real_news_total").val(news_total);
	            	$("#news_title").val("");
	            	$("#news_author").val("");
	            	$("#content").val("");
	            	 KindEditor.instances[0].html("");
	            	$(".files").text("");
	            	$("#showimg").text("");
	            	$('.bar').width(0);
	            	$(".percent").text("0%");
	            	$("#news_href").val("");
	            	str += '<input type="hidden" name="news_title'+news_total+'" id="news_title'+news_total+'"/>' +
	            			'<input type="hidden" name="news_author'+news_total+'" id="news_author'+news_total+'"/>' +
	            			'<input type="hidden" name="news_img_path'+news_total+'" id="news_img_path'+news_total+'"/>' + 
	            			'<input type="hidden" name="is_show_article'+news_total+'" id="is_show_article'+news_total+'"/>'+
	            			'<input type="hidden" name="news_href'+news_total+'" id="news_href'+news_total+'"/>';
	            	str += '<textarea name="content'+news_total+'" id="content'+news_total+'" id="content'+news_total+'" style="display:none;"></textarea>';
	                str += '<div id="appmsgItem'+news_total+'" data-id="'+news_total+'" class="appmsg_item js_appmsg_item ">' +
	                                '<img class="js_appmsg_thumb appmsg_thumb" style="display: none;" src="" id="news_image'+news_total+'">' +
	                                '<i class="appmsg_thumb default" id="news_thumb'+news_total+'">缩略图</i>' +
	                                '<h4 class="appmsg_title"><a onclick="return false;" href="javascript:void(0);" target="_blank" id="news_title_show'+news_total+'">标题</a></h4>' +
	                                '<div class="appmsg_edit_mask">' +
	                                    '<a class="icon18_common edit_gray js_edit" data-id="'+news_total+'" onclick="show_edit_news('+news_total+')"  href="javascript:void(0);">编辑</a>' +
	                                    '<a class="icon18_common del_gray js_del" data-id="'+news_total+'" onclick="show_delete_news('+news_total+')"  href="javascript:void(0);">删除</a>' +
	                                '</div></div>';
	                $("#js_appmsg_preview").append(str);
	            });
	            $("#show_zhaiyao").bind("click", function(){
        			$("#hide_zhaiyao").hide();
        			$("#appmsg_zhaiyao").show();
        		});
        		$("#show_link").bind("click", function(){
        			$("#hide_link").hide();
        			$("#appmsg_link").show();
        		});
	            function show_edit_news(news_id) {
	            	if(middle_val == 0) {
	            		middle_val = news_total;
	            	}
	            	//alert("total ="+padding_top+"news_id="+news_id+"news_total="+middle_val);
	            	if(news_id == 1) {
	            		$(".media_edit_area").css({"padding-top":"0px"});
	            	} else {
	            		var area_top = middle_val - news_id;
	            		area_top = padding_top - (area_top*120);
	            		$(".media_edit_area").css({"padding-top":""+area_top+"px"});
	            	}
	            	cur_image_text = news_total = news_id;
	            	$("#news_title").val($("#news_title"+news_id).val());
	            	$("#news_author").val($("#news_author"+news_id).val());
	            	var news_href = $("#news_href"+news_id).val();
	            	$("#news_href").val(news_href);
	            	var news_img_path = $("#news_img_path"+news_id).val();
	            	var image_path = $("#image_path"+news_id).val();
	            	if(news_img_path != "") {
	            		$(".files").html("<b>("+image_path+")</b><span class='delimg' data-del-id='"+news_total+"' rel='"+image_path+"'>删除</span>");
		            	$("#showimg").html("<img src='"+news_img_path+"' style='width:100px; height:100px;'>");
		            	$('.bar').width(200);
		            	$(".percent").text("100%");
	            	} else {
	            		$(".files").text("");
		            	$("#showimg").text("");
		            	$('.bar').width(0);
		            	$(".percent").text("0%");
	            	}
	            	
	            	$("#content").val($("#content"+news_id).val());
	            	KindEditor.instances[0].html($("#content"+news_id).val());
	            }
				function show_delete_news(news_id) {
	            	$("#appmsgItem"+news_id).hide();
	            	$("#news_title"+news_id).val("");
	            	$("#news_author"+news_id).val("");
	            	$("#news_href"+news_id).val("");
	            	$("#news_img_path"+news_id).val("");
	            	$("#content"+news_id).val("");
	            	padding_top = padding_top - 120;
	            	if(totalArr.length > 0){
	            		totalArr.pop();
	            	}
	            }
	            $("#news_title").bind("keyup", function(){
	            	var js_title = $(this).val();
	            	$("#news_title"+cur_image_text).val(js_title);
	            	$("#news_title_show"+cur_image_text).text(js_title);
	            });
	            $("#news_author").bind("change", function(){
	            	var news_author = $(this).val();
	            	$("#news_author"+cur_image_text).val(news_author);
	            });
	            $("#news_href").bind("change", function(){
	            	var news_href = $(this).val();
	            	$("#news_href"+cur_image_text).val(news_href);
	            });
	            $("#is_show_article").bind("change", function(){
	            	var news_href ;
	            	if($(this).attr("checked")) {
	            		news_href = 1;
	            	} else {
	            		news_href = 0;
	            	}
	            	$("#is_show_article"+cur_image_text).val(news_href);
	            });
	        </script>
    </body>
</html>